<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
			
			.container {
				position: relative;
				height: 600px;
				width: 900px;
				margin: 100px auto;
				/*perspective: 1000px;*/
			}
			
			ul {
				float: left;
				/*transform: rotateX(45deg);*/
				width: 20%;
				height: 100%;
				position: relative;
				transform-style: preserve-3d;
				/*transition: all 1s;*/
			}
			
			ul li {
				height: 100%;
				width: 100%;
				position: absolute;
				top: 0;
				left: 0;
			}
			
			ul:nth-child(2) li {
				background-position-x: -180px
			}
			
			ul:nth-child(3) li {
				background-position-x: -360px
			}
			
			ul:nth-child(4) li {
				background-position-x: -540px
			}
			
			ul:nth-child(5) li {
				background-position-x: -720px
			}
			
			ul li:nth-child(1) {
				transform: translateZ(300px);
				background-image: url(https://i.loli.net/2018/10/18/5bc761041f867.jpg);
			}
			
			ul li:nth-child(2) {
				transform: rotateX(90deg) translateZ(300px);
				background-image: url(https://i.loli.net/2018/10/18/5bc76104334e7.jpg);
			}
			
			ul li:nth-child(3) {
				transform: rotateX(180deg) translateZ(300px);
				background-image: url(https://i.loli.net/2018/10/18/5bc76104d8b18.jpg);
			}
			
			ul li:nth-child(4) {
				transform: rotateX(-90deg) translateZ(300px);
				background-image: url(https://i.loli.net/2018/10/18/5bc76104d9c87.jpg);
			}
			
			.back,
			.next {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				height: 80px;
				width: 120px;
				background: deepskyblue;
				box-shadow: 0 0 55px salmon inset;
				border-radius: 20px;
				border: 1px solid slateblue;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 20px;
				cursor: pointer;
			}
			
			.back {
				left: -120px;
			}
			
			.next {
				right: -120px;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<ul>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<a onclick="goback()" class="back">上一页</a>
			<a onclick="gonext()" class="next">下一页</a>
		</div>
	</body>
	<script>
		var uls = document.querySelectorAll('ul');
		var container=document.querySelector('.container');
		var index = 0;
		var flag=true;
		function goback() {
			if(flag){
				flag=false;
				index++;
				for(var i = 0; i < uls.length; i++) {
					uls[i].style.transition = 'all 1s ' + 0.2 * i + 's';
					uls[i].style.transform = 'rotateX(' + index * 90 + 'deg)';
				}
			}
		}
		function gonext() {
			if(flag){
				flag=false;
				index--;
				for(var i = 0; i < uls.length; i++) {
					uls[i].style.transition = 'all 1s ' + 0.2 * i + 's';
					uls[i].style.transform = 'rotateX(' + index * 90 + 'deg)';
				}
			}
		}
		uls[uls.length-1].addEventListener('transitionend',function(){
			flag=true;
		});
		var timer = setInterval(gonext,1500);
		container.onmouseover=function(){
			clearInterval(timer);
		}
		container.onmouseout=function(){
			clearInterval(timer);
			timer = setInterval(gonext,1500);
			// console.log(timer);
		}
	</script>

</html>